<template>
  <el-form
    :inline="true"
    :model="formInline"
    style="margin-top: 10px"
    class="demo-form-inline"
  >
    <el-form-item label="Consumable Name:">
      <el-input
        v-model="formInline.consumableName"
        placeholder="input chemical"
        clearable
        autocomplete="on"
        name="chemical"
        style="width: 200px"
      />
    </el-form-item>
    <el-form-item label="Similar Consumable:">
      <el-input
        v-model="formInline.similarConsumable"
        placeholder="input similarChemical"
        clearable
        style="width: 200px"
      />
    </el-form-item>
    <el-form-item label="If Disposable Consumables:">
      <el-select
        v-model="formInline.ifDisposableConsumable"
        placeholder="select yes or no"
        clearable
        style="width: 150px"
      >
        <el-option label="Yes" value="1" />
        <el-option label="No" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"> Query</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    style="width: 100%"
    class="center-table"
    v-loading="loading"
    v-if="tableData.length > 0"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
  >
    <!-- <el-table-column prop="Id" label="Id" width="80" /> -->
    <el-table-column label="Index" type="index" width="80" />
    <el-table-column prop="Name" label="Name" width="200" />
    <el-table-column prop="DictName" label="DictName" width="200" />
    <el-table-column prop="Stock" label="Stock" width="200" />
    <!-- <el-table-column prop="Specification" label="Specification" width="150" />
    <el-table-column prop="ActualQuantity" label="ActualQuantity" width="150" />
    <el-table-column
      prop="StorageLocation"
      label="StorageLocation"
      width="150"
    />
    <el-table-column
      prop="DateManufacture"
      label="DateManufacture"
      width="150"
    />
    <el-table-column prop="CAS" label="CAS" width="200" />
    <el-table-column prop="LaboratoryRoom" label="aboratoryRoom" width="150" /> -->
  </el-table>
</template>

<script setup lang="ts" name="Consumables">
import { reactive, ref } from "vue";
import api from "@/utils/axiosInstance";

const formInline = reactive({
  consumableName: "",
  similarConsumable: "",
  ifDisposableConsumable: "",
});

let tableData = ref([]);
let loading = ref(false);

const onSubmit = () => {
  loading.value = true;
  api
    .post("/consumable/query", formInline)
    .then((response) => {
      // 处理API响应
      tableData.value = response.data;
    })
    .catch((error) => {
      // 处理错误
      console.log(error, "error");
    })
    .finally(() => {
      loading.value = false;
    });
  console.log(tableData, "@@@");
};
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 150px;
}
.demo-form-inline .el-select {
  --el-select-width: 150px;
}
.demo-form-inline .el-date-picker {
  --el-select-width: 150px;
}
</style>
